<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义CheckBox、Radio样式</title>

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			padding-top: 100px;
			padding-left: 100px;
		}
		input {
			opacity: 0;
		}
		.radio > label{
			display: inline-block;
			width: 18px;
			height: 18px;
			line-height: 18px;
			border:1px solid #D9D9D9;
			border-radius: 50%;
		}
		.radio-item:checked + label {
			border:1px solid #D73E33;
		}
		.radio-item:checked + label::after {
			content: '';
			display: inline-block;
			width: 10px;
			height: 10px;
			line-height: 10px;
			border-radius: 50%;
			background-color: #D73E33;
			margin:3px;
		}
		.radio, .checkbox,p{
			margin-top: 10px;
		}
		.radio1 > label{
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			background-image: url(./images/radioChecked.png);
			background-position: 30px 0;
		}
		.radio-item2:checked +label{
			background-position: 0 0;
		}
		.checkbox label{
			display: inline-block;
			width: 18px;
			height: 18px;
			line-height: 18px;
			border:1px solid #D9D9D9;
			text-align: center;
			vertical-align: middle;
		}
		.checkbox-item:checked + label{
			border:1px solid #D73E33;
		}
		.checkbox-item:checked + label::after{
			content: '\2714';
			display: inline-block;
			width: 16px;
			height: 16px;
			line-height: 16px;
			color: #D73E33;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<p>使用伪元素：</p>
	<div class="radio">
		<input type="radio" name="radio" id="radio1" class="radio-item">
		<label for="radio1"></label>

		<input type="radio" name="radio" id="radio2" class="radio-item">
		<label for="radio2"></label>
	</div>
	<div class="checkbox">
		<input type="checkbox" name="checkbox" id="checkbox1" class="checkbox-item">
		<label for="checkbox1"></label>

		<input type="checkbox" name="checkbox" id="checkbox2" class="checkbox-item">
		<label for="checkbox2"></label>
	</div>
	<p>使用雪碧图</p>
	<div class="radio1">
		<input type="radio" name="radio" id="radio3" class="radio-item2">
		<label for="radio3"></label>

		<input type="radio" name="radio" id="radio4" class="radio-item2">
		<label for="radio4"></label>
	</div>
</body>
</html>